.echart {
  .echart-header {
    background: var(--themeColor);
    display: flex;
    justify-content: space-between;
    padding: 20rpx 40rpx;
    color: #fff;

    .expend {
      border: 1rpx solid #fff;
      padding: 5rpx 25rpx;
      border-radius: 15rpx;
    }

    .date {
      width: 50vw;

      .date-item {
        display: inline-block;
        text-align: center;
        width: 33%;
        height: 100%;
        align-items: center;
        line-height: 58rpx;
      }

      .week {
        border-top-left-radius: 15rpx;
        border-bottom-left-radius: 15rpx;
        border-left: 1rpx solid #fff;
        border-top: 1rpx solid #fff;
        border-bottom: 1rpx solid #fff;
      }

      .month {
        border: 1rpx solid #fff;
      }

      .year {
        border-top-right-radius: 15rpx;
        border-bottom-right-radius: 15rpx;
        border-top: 1rpx solid #fff;
        border-bottom: 1rpx solid #fff;
        border-right: 1rpx solid #fff;
      }

      .active {
        background: #fff;
        color: var(--themeColor);
      }
    }
  }

  .week-content {
    .echart-table {
      padding: 30rpx 40rpx;
      border-bottom: 1rpx solid #ccc;

      .echart-text {
        color: #666;
        font-size: 24rpx;
        padding-bottom: 30rpx;
      }

      #mychart-dom-bar {
        border-top: 1rpx solid #ccc;
        width: 100%;
        height: 300rpx;
        display: inline-block;
      }
    }

    .sort {
      padding: 30rpx 40rpx;

      .sort-title {
        color: #666;
        font-size: 24rpx;
      }
    }
  }
}